<template>
  <div class="container">
    <!-- 头部导航 -->
    <div class="index_top">
      <div class="into_index">首页<i class="el-icon-close"></i></div>
      <div class="current">施工队信息修改<i class="el-icon-close"></i></div>
    </div>
    <div class="title">基础信息</div>
    <div class="container-box">
      <h3 class="marginb20">施工队基本信息</h3>

      <div class="content-form">
        <el-form ref="form" :model="form" label-position="left">
          <div class="form-tel marginb20">
            <div class="tel-input">
              <el-form-item label="店铺logo" label-width="80px">
                <el-upload
                  action="/api/client/base/uploadfile"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview_logo"
                  ref="upload"
                  :on-remove="handleRemove_logo"
                  :on-success="handleAvatarSuccess_logo"
                  :before-upload="beforeAvatarUpload_logo"
                  :auto-upload="true"
                  :limit="1"
                  :headers="myHeaders"
                  :file-list="logoList"
                  accept="image/jpeg, image/jpg, image/gif, image/png"
                  multiple
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible_logo">
                  <img width="100%" :src="dialogImageUrl_logo" alt="" />
                </el-dialog>
              </el-form-item>
            </div>
            <div class="service">
              <el-form-item label="店铺背景" label-width="80px">
                <el-upload
                  action="/api/client/base/uploadfile"
                  list-type="picture-card"
                  :on-preview="handlePictureCardPreview_bg"
                  ref="upload"
                  :on-remove="handleRemove_bg"
                  :on-success="handleAvatarSuccess_bg"
                  :before-upload="beforeAvatarUpload_bg"
                  :auto-upload="true"
                  :limit="1"
                  :headers="myHeaders"
                  :file-list="bgList"
                  accept="image/jpeg, image/jpg, image/gif, image/png"
                  multiple
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible_bg">
                  <img width="100%" :src="dialogImageUrl_bg" alt="" />
                </el-dialog>
              </el-form-item>
            </div>
          </div>
          <div class="form-item marginb20">
            <el-form-item label="名称" label-width="80px">
              <el-input
                type="text"
                v-model="form.title"
                class="form-item-input"
              ></el-input>
            </el-form-item>
            <!-- <el-button type="text" @click="handleName" class="text">更改</el-button> -->
          </div>
          <div class="form-item marginb20">
            <el-form-item label="地址" label-width="80px">
              <el-select
                v-model="provinceObj"
                @change="select1"
                value-key="cityid"
                placeholder="请选择省份"
              >
                <el-option
                  v-for="item in province"
                  :key="item.cityid"
                  :label="item.city_name"
                  :value="{ cityid: item.cityid, city_name: item.city_name }"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="cityObj"
                @change="select2"
                value-key="cityid"
                placeholder="请选择城市"
              >
                <el-option
                  v-for="item in city"
                  :key="item.cityid"
                  :label="item.city_name"
                  :value="{ cityid: item.cityid, city_name: item.city_name }"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="districtObj"
                @change="select3"
                value-key="cityid"
                placeholder="请选择县区"
              >
                <el-option
                  v-for="item in district"
                  :key="item.cityid"
                  :label="item.city_name"
                  :value="{ cityid: item.cityid, city_name: item.city_name }"
                >
                </el-option>
              </el-select>
              <el-select
                v-model="streetObj"
                @change="select4"
                value-key="cityid"
                placeholder="请选择街道"
              >
                <el-option
                  v-for="item in street"
                  :key="item.cityid"
                  :label="item.city_name"
                  :value="{ cityid: item.cityid, city_name: item.city_name }"
                >
                </el-option>
              </el-select>
              <el-input
                style="width: 27%"
                v-model="form.address"
                placeholder="请输入详细地址"
              ></el-input>
            </el-form-item>
          </div>

          <div class="form-tel marginb20">
            <div class="tel-input">
              <el-form-item label="联系电话" label-width="80px">
                <el-input type="text" v-model="form.phone"></el-input>
              </el-form-item>
              <!-- <el-button type="text" @click="handlePhone" class="text">更改</el-button> -->
            </div>
            <div class="service">
              <el-form-item label="服务类型" label-width="80px">
                <el-select
                  v-model="serviceValue"
                  multiple
                  filterable
                  allow-create
                  default-first-option
                  placeholder="请选择服务类型"
                >
                  <el-option
                    v-for="item in serviceList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <!-- <el-button type="text" @click="handleService" class="text">更改</el-button> -->
            </div>
          </div>

          <div class="form-tel marginb20">
            <div class="tel-input">
              <el-form-item label="联系人" label-width="80px">
                <el-input type="text" v-model="form.name"></el-input>
              </el-form-item>
            </div>
            <div class="tel-input">
              <el-form-item label="从业年限" label-width="80px">
                <el-input type="text" v-model="form.employ_year"></el-input>
              </el-form-item>
            </div>
          </div>
          <div class="form-tel marginb20">
            <div class="tel-input">
              <el-form-item label="店铺经度" label-width="80px">
                <el-input type="text" v-model="form.lng"></el-input>
              </el-form-item>
            </div>
            <div class="tel-input">
              <el-form-item label="店铺纬度" label-width="80px">
                <el-input type="text" v-model="form.lat"></el-input>
              </el-form-item>
            </div>
          </div>
          <!-- 起始报价 -->
          <div class="form-tel marginb20">
            <div class="tel-input">
              <el-form-item label="起始报价" label-width="80px">
                <el-input
                  type="text"
                  style="width: 20%"
                  v-model="form.start_offer"
                ></el-input
                >-
                <el-input
                  type="text"
                  style="width: 20%"
                  v-model="form.end_offer"
                ></el-input
                >元/m²
              </el-form-item>
            </div>
          </div>
          <div class="form-tel marginb20">
            <div class="tel-input">
              <el-form-item label="入驻卖场" label-width="80px">
                <el-select v-model="form.market_id" disabled placeholder="请选择">
                  <el-option
                    v-for="item in marketList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
          <!-- 营业时间 -->
          <div class="form-tel marginb20">
            <div class="tel-input">
              <el-form-item label="营业时间" label-width="80px">
                <el-select v-model="form.open_day" placeholder="请选择开始">
                  <el-option
                    v-for="item in weekList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                至
                <el-select v-model="form.close_day" placeholder="请选择结束">
                  <el-option
                    v-for="item in weekList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
                <el-time-picker
                  is-range
                  v-model="timeHourse"
                  @change="selectHourse"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  placeholder="选择时间范围"
                >
                </el-time-picker>
              </el-form-item>
            </div>
          </div>
          <!-- 个性签名 -->
          <div class="marginb20" style="width: 50%">
            <div class="tel-input">
              <el-form-item label="个性签名" label-width="80px">
                <el-input
                  type="textarea"
                  rows="4"
                  placeholder="个性签名~"
                  style="width: 100%"
                  v-model="form.sign"
                ></el-input>
              </el-form-item>
            </div>
          </div>
        </el-form>
      </div>
    </div>
    <div class="btn">
      <el-button type="primary" @click="toSubmit">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        title: "",
        phone: "",
        employ_year: "",
        service_type: [
          {
            id: "",
            name: "",
          },
          {
            name: "",
          },
        ],
        sign: "",
        address: "",
        open_day: "",
        close_day: "",
        open_time: "",
        close_time: "",
        lng: "",
        lat: "",
        market_id:''
      },
      marketList:[],//卖场列表
      serviceList: [],
      serviceValue: [], //选中的服务类型

      dialogImageUrl_bg: "",
      dialogVisible_bg: false,
      dialogImageUrl_logo: "",
      dialogVisible_logo: false,
      bgList: [],
      logoList: [],

      province: [],
      city: [],
      district: [],
      street: [],
      provinceObj: {},
      cityObj: {},
      districtObj: {},
      streetObj: {},
      myHeaders: {
        "access-token": this.$store.state.token, //这里重新定义了请求头
        Authorization: this.$store.state.token,
        "user-id": this.$store.state.user_id,
      },
      weekList: [
        {
          label: "周一",
          value: "周一",
        },
        {
          label: "周二",
          value: "周二",
        },
        {
          label: "周三",
          value: "周三",
        },
        {
          label: "周四",
          value: "周四",
        },
        {
          label: "周五",
          value: "周五",
        },
        {
          label: "周六",
          value: "周六",
        },
        {
          label: "周日",
          value: "周日",
        },
      ],
      timeHourse: [new Date(), new Date()],
    };
  },
  mounted() {
    this.getBuilderInfo();
    this.getServiceType();
    this.getProvince();
    this.getMarketList()
  },
  methods: {
    getMarketList(){
      // 获取卖场列表
      this.$api.businessList().then((res) => {
        console.log(res, "卖场列表");
        if (res.code == 1) {
          this.marketList = res.data ? res.data : [];
        }
      });
    },

    // 获取服务类型
    getServiceType() {
      this.$http.post("/api/admin/base/option/getList").then((res) => {
        console.log(res, "服务类型");
        if (res.code == 1) {
          this.serviceList = res.data.service_type;
        }
      });
    },

    // 选择小时段
    selectHourse() {
      console.log(this.timeHourse, "小时小时");
      if (this.timeHourse) {
        this.form.open_time = this.$moment(this.timeHourse[0]).format(
          "HH:mm:ss"
        );
        this.form.close_time = this.$moment(this.timeHourse[1]).format(
          "HH:mm:ss"
        );
      }
    },

    // 获取施工队信息
    getBuilderInfo() {
      this.logoList = [];
      this.bgList = [];
      let sid = localStorage.getItem("sid");
      this.serviceValue = [];
      let params = {
        id: sid,
      };
      this.$api.builderTeam(params).then((res) => {
        if (res.code == 1) {
          console.log("data", res);
          this.form = res.data;
          // this.form.open_time = this.$moment(res.data.open_time,'HH:mm:ss').format('HH:mm:ss')
          if (this.form.open_time && this.form.close_time) {
            this.form.open_time = this.$moment(res.data.open_time, "HH:mm:ss");
            this.form.close_time = this.$moment(
              res.data.close_time,
              "HH:mm:ss"
            );
            this.timeHourse = [this.form.open_time, this.form.close_time];
          }
          console.log(this.timeHourse, "时间时间");
          if (Array.isArray(res.data.service_type)) {
            res.data.service_type.map((item) => {
              this.serviceValue.push(item.id);
            });
          } else {
            this.serviceValue.push(res.data.service_type.id);
          }

          this.logoList.push({
            id: res.data.avatar.id,
            url: res.data.avatar.path,
          });

          this.bgList.push({
            id: res.data.back_thumb_url.id,
            url: res.data.back_thumb_url.path,
          });

          this.provinceObj = {
            cityid: res.data.province_id,
            city_name: res.data.province,
          };
          if (res.data.province_id) {
            this.getCityList();
          }
          this.cityObj = {
            cityid: res.data.city_id,
            city_name: res.data.city,
          };
          if (res.data.city_id) {
            this.getAreaList();
          }
          this.districtObj = {
            cityid: res.data.district_id,
            city_name: res.data.district,
          };
          if (res.data.district_id) {
            this.getStreetList();
          }
          this.streetObj = {
            cityid: res.data.street_id,
            city_name: res.data.street,
          };
        }
      });
    },

    // 店铺logo
    handleRemove_logo(file, fileList) {
      this.logoList = fileList;
    },
    handlePictureCardPreview_logo(file) {
      this.dialogImageUrl_logo = file.url;
      this.dialogVisible_logo = true;
    },
    handleAvatarSuccess_logo(res, file, fileList) {
      this.logoList = fileList;
    },
    beforeAvatarUpload_logo(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传商品图片大小不能超过 2MB!");
      }
      return isLt2M;
    },

    // 店铺背景
    handleRemove_bg(file, fileList) {
      this.bgList = fileList;
    },
    handlePictureCardPreview_bg(file) {
      this.dialogImageUrl_bg = file.url;
      this.dialogVisible_bg = true;
    },
    handleAvatarSuccess_bg(res, file, fileList) {
      this.bgList = fileList;
    },
    beforeAvatarUpload_bg(file) {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传商品图片大小不能超过 2MB!");
      }
      return isLt2M;
    },

    // 省份选择
    select1() {
      this.cityObj = {};
      this.districtObj = {};
      this.streetObj = {};
      this.getCityList();
    },
    // 城市选择
    select2() {
      this.districtObj = {};
      this.streetObj = {};
      if (!this.provinceObj) {
        this.$message.warning("请先选择省份");
        return;
      }
      this.getAreaList();
    },
    // 县区选择
    select3() {
      this.streetObj = {};
      if (!this.cityObj) {
        this.$message.warning("请先选择城市");
        return;
      }
      this.getStreetList();
    },
    // 街道选择
    select4() {
      if (!this.districtObj) {
        this.$message.warning("请先选择县区");
        return;
      }
    },

    // 获取省份
    getProvince() {
      this.$http.post("/api/admin/base/Region/getProvinceList").then((res) => {
        console.log(res, "省份");
        if (res.code == 1) {
          this.province = res.data ? res.data : [];
        }
      });
    },
    // 获取城市
    getCityList() {
      this.$http
        .post("/api/admin/base/Region/getCityList", {
          province_id: this.provinceObj.cityid,
        })
        .then((res) => {
          console.log(res, "城市列表");
          if (res.code == 1) {
            this.city = res.data ? res.data : [];
          }
        });
    },
    // 获取县区
    getAreaList() {
      this.$http
        .post("/api/admin/base/Region/getDistrictList", {
          city_id: this.cityObj.cityid,
        })
        .then((res) => {
          console.log(res, "县区列表");
          if (res.code == 1) {
            this.district = res.data ? res.data : [];
          }
        });
    },
    // 获取街道
    getStreetList() {
      this.$http
        .post("/api/admin/base/region/getStreetList", {
          district_id: this.districtObj.cityid,
        })
        .then((res) => {
          console.log(res, "街道列表");
          if (res.code == 1) {
            this.street = res.data ? res.data : [];
          }
        });
    },

    // 提交按钮
    toSubmit() {
      console.log(this.serviceValue);
      let logo_id = [];
      this.logoList.map((item) => {
        if (item.response) {
          logo_id.push(item.response.data.id);
        } else {
          logo_id.push(item.id);
        }
      });
      let bg_id = [];
      this.bgList.map((item) => {
        if (item.response) {
          bg_id.push(item.response.data.id);
        } else {
          bg_id.push(item.id);
        }
      });
      let params = {
        id: localStorage.getItem("sid"),
        title: this.form.title,
        phone: this.form.phone,
        service_type: this.serviceValue.join(","),
        employ_year: this.form.employ_year,
        name: this.form.name,
        start_offer: this.form.start_offer,
        end_offer: this.form.end_offer,
        sign: this.form.sign,
        avatar: logo_id.join(","),
        back_thumb_url: bg_id.join(","),
        open_day: this.form.open_day,
        close_day: this.form.close_day,
        open_time: this.form.open_time,
        close_time: this.form.close_time,
        lng: this.form.lng,
        lat: this.form.lat,

        province: this.provinceObj.city_name,
        city: this.cityObj.city_name,
        district: this.districtObj.city_name,
        street: this.streetObj.city_name,
        province_id: this.provinceObj.cityid,
        city_id: this.cityObj.cityid,
        district_id: this.districtObj.cityid,
        street_id: this.streetObj.cityid,
        address: this.form.address,
      };
      console.log(params, "提交数据");
      this.$http
        .post("/api/admin/builder/BuilderTeam/edit", params)
        .then((res) => {
          console.log(res, "编辑结果");
          if (res.code == 1) {
            this.$message.success("修改成功");
            this.getBuilderInfo();
          } else {
            this.$message.warning(res.msg);
          }
        });
    },
  },
};
</script>

<style scoped lang="less">
.marginb20 {
  margin-bottom: 20px;
}
.form-logo {
  padding: 0 10px;
}
.form-item {
  .el-select {
    margin-right: 10px;
  }
  display: flex;
  // justify-content: space-between;
  // align-items: center;

  .el-form-item {
    width: 90%;
  }
}

.content-form .el-form-item {
  margin-bottom: 0 !important;
}

.form-tel {
  display: flex;
  .tel-input {
    margin-right: 240px;
    display: flex;
    align-items: center;
  }
  .change {
    font-size: 12px;
    color: #5692fa;
    margin-left: 10px;
  }
  .service {
    display: flex;
    align-items: center;
  }
}

.form-time {
  display: flex;
}
.service-time {
  margin-right: 100px;
  margin-left: 8px;
}
.form-textarea {
  padding-left: 14px;
  .el-form-item {
    display: flex;
  }
}
.submit-btn {
  padding: 0 0 50px 0;
}

//图片上传样式
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.form-logo {
  display: flex;
}
.bg-logo {
  margin-right: 250px;
}
//修改的样式
.text {
  font-size: 12px;
  color: #5692fa;
  margin-left: 10px;
}
.btn {
  width: 100%;
  text-align: center;
  margin: 100px 0;
}
</style>